<template>
  <view class="content">
    <!-- 单词解析 -->
    <view class="word-detail">  
      <view class="word-info">    
        <view class="word-origin">
          <view class="mask" v-show="isPracting"></view>
          <view class="text">{{word.en}}</view>
        </view>
        <view class="trans-and-opt">
          <!-- <text class="word-translate">{{word.translation.join()}}</text> -->
          <view class="word-opt">
            <!-- <view class="iconfont icon-shoucang1"></view> -->
            <view @click="playVolume" class="iconfont icon-volume active"></view>
          </view>
        </view>
      </view>
      <view class="trans-detal">
        <view v-for="(item, index) in word.explains" :key="index">
          {{item}}
        </view>
      </view>
      <view class="practice-input">
        <view class="tip" :class="isRight?'success':'error'">{{ confirmInput ? (isRight ? '恭喜您默写正确了~':'还没默写正确哦~') : '' }}</view>
        <input type="text" 
        @focus="onFocus" 
        @change="check" 
        v-model="value" 
        :placeholder="isPracting?'在此输入单词':'点击开始默写来练习吧'" 
        >
      </view>   
    </view>  
    <view class="operation">
      <view class="opt-pratice opt-button" v-show="!isPracting" @click="beginPractice">开始默写</view>
      <view class="opt-answer opt-button" v-show="isPracting" @click="showAnswer">查看答案</view>
      <view ref="aaa" class="opt-next opt-button" @click="nextWord">下一个</view>
    </view>
    <toast ref="toast" :msg="errMsg" :isShow="showError"/>
  </view>    
</template>

<script>
import util, {baseUrl} from '../../util/util'
import Toast from '../../components/toast/Toast.vue'
export default {
  components: { Toast },
  data(){ 
    return {
      word : {
        id:0,
        translation:[],
        en : '',
        explains: [],
        uk_speech:'',
        us_speech:''
      },
      isPracting: false,
      value : '',
      // tip : '还没有拼写正确哦~',
      isRight: false,
      id:0,
      course_id: "",
      audioContext:{},
      courseData:{},
      errMsg:'',
      // showError:false

      confirmInput: false,
      countDown: 3,
      page: 1,
      isFinish: false
    }
  },
  methods:{
    beginPractice(){
      this.isPracting = !this.isPracting
      this.confirmInput = false
    },
    showAnswer(){
      this.isPracting = !this.isPracting
      this.confirmInput = false
    },
    // async translateWord(word,id){
    //   const res = await util.request({
    //     url : '/api/words_yd_trans/',
    //     data : {
    //       en_w:word
    //     }
    //   })
    //   this.word = res.data.data
    //   this.audioContext.src = this.word.uk_speech
    //   this.id = this.word.id
    // },
    async playVolume(){
      const res = await util.request({
        url: "/api/words_yd_audio/",
        data: {
          en_w: this.word.en
        }
      })

      const {data} = res.data
      this.audioContext.src = baseUrl + "/" + data
      this.audioContext.play()
    },
    onFocus() {
      this.confirmInput = false
      this.isPracting = true
    },
    check(){
      this.confirmInput = true
      this.isRight = this.word.en === this.value
      this.isPracting = !this.isRight
      if(this.isRight){
        util.request({
          url : `/api/user_course_matrix/?course_id=${this.course_id}&word_id=${this.word.id}`,
          type : util.req.type.PUT
        })
      }
    },
    // async getCurrentCourseData(){
    //   const data = await util.getStorage('course_data')
    //   // console.log(data);
    //   this.courseData = data
    // },
    async nextWord(){
      if(!this.isRight) {
        this.confirmInput = true
        return
      }
      if(this.isFinish) {
        wx.showToast({
          icon: "error",
          title: "没有更多单词了"
        })
        return
      }
      this.page += 1
      this.confirmInput = false
      this.value = ''
      this.isRight = false
      this.getNextWord(this.course_id)
    },
    // 获取该课程中熟练程度小于2的单词
    async getNextWord(course_id) {
      const res = await util.request({
        url : '/api/words/',
        data : {
          page: this.page, 
          page_size: 1, // 每次都一个个的拿
          course_id
        }
      })

      const {data} = res.data
      if(!data[0]) {
        this.isFinish = true
      } 

      const word = await util.request({
        url: '/api/words_yd_trans/',
        data: {
          en_w: data[0].en
        }
      })

      this.word = word.data.data
      this.audioContext.src = this.word.uk_speech
    }
  },
  onLoad(opt){
    // this.id = parseInt(opt.id)
    
    // this.translateWord(opt.en,opt.id)
    // this.getCurrentCourseData()

    this.course_id = parseInt(opt.course_id)

    // 获取该课程中熟练程度小于2的单词
    this.getNextWord(this.course_id)
    this.audioContext = uni.createInnerAudioContext()
  },
}
</script>

<style>
.content {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #eee;
}
.word-detail {
  padding: 40rpx;
  background-color: #fff;
  border-radius: 4rpx;
}
.word-detail view {
  min-height: 60rpx;
  line-height: 60rpx;
}

.word-info {
  display: flex;
  justify-content: space-between;
}

.word-detail .trans-and-opt{
  display: flex;
  justify-content: flex-end
}
.word-origin .text {
  color: #333;
  font-weight: 700;
}
.word-detail .iconfont{
  color: #ccc;
}
.word-detail .iconfont.active {
  color: #0a0;
}
.word-origin , .trans-detal {
  color: #666;
}
.trans-detal {
  border-bottom: 1px solid #b1b1b1;
}
.word-origin {
  position: relative;
}
.word-origin .mask {
  position: absolute;
  width: 100%;
  background-color: #fff;
  top: 0;
  left: 0;
}
.tip {
  font-size: 24rpx;
  padding-left: 20rpx;
}
.tip.success {
  color: #0a0;
}
.tip.error {
  color: rgb(238, 11, 68);
}
.practice-input {
  padding-bottom: 20rpx;
}
.practice-input input {
  border: 0 none;
  outline: 0 none;
  background-color: #eee;
  height: 80rpx;
  padding: 0 20rpx;
}

.operation {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 0;
}
.operation .opt-button{
  height: 80rpx;
  border-radius: 40rpx;
  width: 40%;
  line-height: 80rpx;
  text-align: center;
}
.opt-next {
  color: #b2b2b3;
  background-color: #fff;
}
.opt-pratice, .opt-answer {
  background-color: #5ccdd3;
  color: #fff;
}

.operation .opt-button:active {
  box-shadow: 0 0 8rpx 4rpx #ccc;
}

.word-opt {
  display: flex;
}
.word-opt .iconfont {
  margin-right: 40rpx;
}
</style>